<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul>
    <li>知否知否, 应该有弹窗在手</li>
    <li>知否知否, 应该有弹窗在手</li>
    <li>知否知否, 应该有弹窗在手</li>
    <li>知否知否, 应该有弹窗在手</li>
    <li>知否知否, 应该有弹窗在手</li>
</ul>

<script>


    // 事件委托的原理: 给父节点添加侦听器, 利用事件冒泡影响每一个子节点
    var ul = document.querySelector('ul');
    var liArr = ul.children;

    ul.addEventListener('click', function (e) {
        // 点击的li, li有事件冒泡, 会把点击事件, 传播给它的父级 ul, 也有点击事件
        alert('知否知否, 应该有弹窗在手')
        // e.target 这个可以得到我们点击的对象
        var target = e.target;
        target.style.backgroundColor = 'pink';
    })

</script>
</body>
</html>
